<template>
	<view class="page">
		<view class="lz-text-center lz-padding-top-80 ">
			<image class="logo-img" src="@/static/images/logo01.png"></image>
		</view>
		<view class="main lz-text-center ">
			<view class="logo-desc lz-margin-bottom-30 ">
				登录
				<p class="logo-info lz-margin-top-12 ">欢迎使用，XXX</p>
			</view>
			<view class="lz-margin-bottom-60 lz-margin-top-104 " >
				<view class="input-row">
					<image class="login-img" src="@/static/images/yonghu.png"></image>
					<u-input clearable v-model.trim="loginForm.username" placeholder="请输入账号"
						border="none">
					</u-input>
				</view>
				<view class="input-row">
					<image class="login-img" src="@/static/images/mima.png"></image>
					<u-input clearable type="password" v-model.trim="loginForm.password" border="none"
						placeholder="请输入密码"></u-input>
				</view>
			</view>
			<view type="primary" class="login-btn" @tap="handleLogin" :loading="loading" :disabled="loading||codeFail" >登 录</view>
		</view>
	</view>
</template>

<script>
	import {postLogin,getVerifyCode,getInfo,} from "@/common/http.api.js"
	export default {
		name: 'h5login',
		data() {
			return {
				// version: (versionInfo.version / 100).toFixed(2),
				// time: versionInfo.time,
				codeLoading: true,
				codeFail: false,
				codeUrl: '',
				loginForm: {
					username: '',
					password: '',
					rememberMe: false,
					code: "",
					uuid: ""
				},
				loading: false,
				token: '',
				userDataAll: {
					token: '',
					id: '',
					username: "",
					password: "",
					roles: [],
					nickname: '',
					avatar: '',
					user: {},
					permissions: []
				}
			};
		},
		onReady() {
			this.initLogin()
		},
		methods: {

			//存证用户名和密码
			setUserStorage(username, password) {
				uni.setStorageSync('username', username)
				if (this.loginForm.rememberMe) {
					uni.setStorageSync('password', password)
				} else {
					uni.removeStorageSync('password')
				}
			},
			handCheck() {
				if (this.loginForm.username.length < 2) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 2 个字符'
					});
					return false;
				}
				if (this.loginForm.password.length < 3) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为3个字符'
					});
					return false;
				}
				// //密码验证
				// let regExp= /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,20}$/;
				// if(!regExp.test(this.loginForm.password)){
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '密码长度必须介于 6 和 20 之间，并且包含大小写字母以及数字'
				// 	});
				// 	return;
				// }

				return true;
			},
			handleLogin() {
				/**
				 * 客户端对账号信息进行一些必要的处理和校验。
				 */
				// this.loginForm.username = this.loginForm.username.trim()
				// this.loginForm.password = this.loginForm.password.trim()
				// this.loginForm.code = this.loginForm.code.trim()

				if (!this.handCheck()) return;
				this.loading = true
				let param = Object.assign({}, this.loginForm)

				//加密登陆
				// param.username = aesEncrypt(this.loginForm.username)
				// param.password = aesEncrypt(this.loginForm.password)
				param.username = this.loginForm.username
				param.password = this.loginForm.password
				uni.showLoading({
					mask: true,
					title: '登录中...'
				})
				//存储token和用户
				this.setUserStorage(this.loginForm.username, this.loginForm.password)

				postLogin(param).then(res => {
					uni.hideLoading()
					if (res.access_token) {
						this.userDataAll.token = res.access_token
						this.token = res.access_token
						this.$u.vuex('userInfo.token', res.access_token);
						this.getUserInfo()
						this.loading = false
					} else {
						this.loading = false
						uni.showModal({
							title: "失败",
							content: res.msg,
							showCancel: false,
						})
					}
				}).catch(e => {
					console.log(e)
					this.loading = false
				}).finally(() => {
					uni.hideLoading()
				})
				this.loading = false
			},
			// 用户信息
			getUserInfo() {
				getInfo({
					custom: {
						auth: true,
						catch: true
					}
				}).then((res) => {
					console.log('getUserInfo',res);
					uni.hideLoading();
					if (res.code == 200) {
						// if (res.user.avatar == '' || res.user.avatar == null) {
						// 	res.user.avatar = require(
						// 		"@/static/images/profile.jpg")
						// }
						this.$u.vuex('exitFlag', 1);
						if (this.userInfo.token) {
							this.token = this.userInfo.token
						}
						this.userDataAll = {
							token: this.token,
							userName: res.user.userName,
							nickName: res.user.nickName,
							deptName: res.user.dept.deptName,
							avatar: res.user.avatar,
							userId: res.user.userId,
							user: res.user,
							roles: res.roles,
							permissions: res.permissions
						}
						this.$u.vuex('userInfo', this.userDataAll);
						uni.reLaunch({
							url: '/pages/index/index',
						});
					}
				}).catch(() => {})
			},
			//验证码
			getCode() {
				uni.showLoading({
					mask: true,
					title: '获取验证码...'
				})
				this.codeFail = true
				getVerifyCode().then(res => {
					if (res.code == 200) {
						this.codeUrl = "data:image/gif;base64," + res.img;
						this.loginForm.uuid = res.uuid;
						this.codeFail = false
					}
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					uni.hideLoading()
					this.loading = false
					uni.stopPullDownRefresh()
				})
			},
			initLogin() {
				const uniIdToken = uni.getStorageSync('uniIdToken')
				const username = uni.getStorageSync('username')
				const password = uni.getStorageSync('password')
				if (username) {
					this.loginForm.username = username
				}
				if (password) {
					this.loginForm.password = password
					this.loginForm.rememberMe = true
				} else {
					this.loginForm.rememberMe = false
				}
				uni.getNetworkType({
					success: res => {
						// console.log(res)
						if (res.networkType == 'none') { //无网络状态
							this.codeFail = true
							uni.showModal({
								title: '无网络',
								content: "请保持网络连接！",
								showCancel: false
							})
							return
						}
					}
				});
			}
		}
	};
</script>


<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
	}

	.main {
		background-color: #fff;
		padding: 0 36rpx
	}

	.logo-img {
		padding-top: 60px;
		width: 180rpx;
		height: 180rpx;
	}

	.logo-desc {
		font-size: 46rpx;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;

		.logo-info {
			font-family: 思源黑体;
			font-size: 24rpx;
			font-weight: normal;
			text-align: center;
			letter-spacing: 0px;
			color: #7B7E8C;
		}
	}

	.input-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 32rpx;
		margin-top: 20rpx;
		border-bottom: 0.5px solid rgba(198, 198, 198, 0.5);
		// padding:24rpx 0;
		height: 90rpx;
		line-height: 90rpx;
	}

	.login-img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 20rpx;
	}

	.code-image {
		width: 200rpx;
		height: 60rpx;
	}



	.login-btn {
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 8rpx;
		opacity: 1;
		background: #1777FF;

	}

	.login-btn-tyrz {
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 8rpx;
		border: 1px solid #1777FF;
		color: #1777FF;
	}
</style>
